function Engine(cid) {
    'use strict';
    var canvas = document.getElementById(cid);
    var context = canvas.getContext('2d');
    var renderId = undefined;
    var entities = [];

    this.interval = 33;

    function render() {
        var size = entities.length;
        context.fillStyle='#FFFFFF';
        context.fillRect(0, 0, canvas.width, canvas.height);
        for(var i = 0; i < size; i++) entities[i].draw(context);

        var cw = canvas.width / 2;
        var ch = canvas.height / 2;

        context.moveTo(0, ch);
        context.lineTo(canvas.width, ch);
        context.stroke();

        for(var i = 20; i < cw; i += 20) {
            context.moveTo(cw + i, ch - 5);
            context.lineTo(cw + i, ch + 5);
            context.stroke();

            
            context.moveTo(cw - i, ch - 5);
            context.lineTo(cw - i, ch + 5);
            context.stroke();
        }

        context.moveTo(cw, 0);
        context.lineTo(cw, canvas.height);
        context.stroke();

        for(var i = 20; i < cw; i += 20) {
            context.moveTo(cw - 5, ch - i);
            context.lineTo(cw + 5, ch - i);
            context.stroke();

            
            context.moveTo(cw - 5, ch + i);
            context.lineTo(cw + 5, ch + i);
            context.stroke();
        }

        var x = 0;
        var y = 0;
        do {
            y = x * x;

            context.moveTo(cw + x, ch + y);
            context.lineTo(cw + x + 1, ch + y + 1);
            context.stroke();

            x += 1;
        } while(y >= 0 && y <= ch);
    }

    function onWindowResizedListener(e) {
        canvas.width = document.body.clientWidth;
        canvas.height = document.body.clientHeight;
    }

    function onMouseDownListener(e) {
        var size = entities.length;
        for(var i = 0; i < size; i++) {
            entities[i].mousedown && entities[i].mousedown(e.x, e.y);
        }
    }

    function onMouseMoveListener(e) {
        var size = entities.length;
        for(var i = 0; i < size; i++) {
            entities[i].mousemove && entities[i].mousemove(e.x, e.y);
        }
    }

    function onMouseUpListener(e) {
        var size = entities.length;
        for(var i = 0; i < size; i++) {
            entities[i].mouseup && entities[i].mouseup(e.x, e.y);
        }
    }

    function start() {
        renderId = setInterval(render, this.interval);
    }

    function pause() {
        if (renderId) {
            clearInterval(renderId);
            renderId = undefined;
        }
    }

    function addEntity(entity) {
        entities.push(entity);
    }

    onWindowResizedListener();
    window.addEventListener('resize', onWindowResizedListener);
    canvas.addEventListener('mousedown', onMouseDownListener);
    canvas.addEventListener('mousemove', onMouseMoveListener);
    canvas.addEventListener('mouseup', onMouseUpListener);
    canvas.addEventListener('drag', function() {
        console.log('drag');
    });

    this.start = start;
    this.pause = pause;
    this.addEntity = addEntity;
}